<template>
  <div>

    <anchored-heading :level="5">Hello world!</anchored-heading>

    <h1 :style="style" :attrs="attrs.id" :class="'class'.foo">{{ blogTitle }}</h1>
  </div>
</template>
<script>
    export default {
        name: "render",
        data(){
          return{
            blogTitle: 'blogTitleblogTitle',
            'class': {
              foo: true,
              bar: false
            },
            // 和`v-bind:style`一样的 API
            // 接收一个字符串、对象或对象组成的数组
            style: {
              color: 'red',
              fontSize: '14px'
            },
            // 正常的 HTML 特性
            attrs: {
              id: 'foo'
            }
          }
        },
        components: {
          anchoredHeading: {
                render: function (createElement) {
                  return createElement(
                    'h' + this.level,   // tag name 标签名称
                    this.$slots.default // 子组件中的阵列
                  )
                },
                props: {
                  level: {
                    type: Number,
                    required: true
                  }
                }
          }
        },
      render: function (createElement) {
        return createElement('h1', this.blogTitle)
      },
      props:{

      }
    }
</script>

<style scoped>

</style>
